$(function () {
    // 需求1: 点击a连接，显示隐藏盒子;
    $("#loginBox a").on('click', function () {
        // #loginBox隐藏  #registerBox显示
        $("#loginBox").hide();
        $('#registerBox').show();
    });
    $("#registerBox a").on('click', function () {
        // #loginBox显示  #registerBox隐藏
        $("#loginBox").show();
        $("#registerBox").hide();
    })

    // 需求2: 自定义校验规则
    let form = layui.form
    // verify()的值是一个对象
    form.verify({
        // 属性是规则名称, 值可以是数组或者函数!
        pwd: [
            // 第一个值是校验规则
            /^[\S]{6,15}$/, 
            // 报错信息
            "密码的长度为6-15个字符，且不能包含空格！"
        ], // 要有逗号分隔;
        repwd: function (value) { // 规则添加给谁,value就是他的值
            // value也可以写成  $('[name=repassword]').val();
            let pwd = $('#registerBox [name=password]').val()
            // 判断: 第一次输入的密码和第二次如果不相同,报错;
            if (value !== pwd) {
                return '输入的两次密码不一致！';
            }
        }
    });

    // 需求3: 注册(axios)
    let layer = layui.layer;
    $("#form-reg").on("submit", function (e) {
        // 阻止表单提交
        e.preventDefault();
        // 发送ajax
        axios({
            method: 'POST',
            url: '/api/reguser',
            // 这个服务器，后端不允许传递 json 格式数据，只允许传递 a=1&b=2&c=3
            data: $("#form-reg").serialize()
        }).then((res) => {
            // console.log(res.data);
            // 判断状态码
            if (res.data.status !== 0) {
                // return alert(res.data.message);
                return layer.msg(res.data.message);
            }
            // 注册成功，给提示
            // alert(res.data.message);
            layer.msg('恭喜您，注册用户成功！');
            // 清空表单
            $("#form-reg")[0].reset();
            // 切换到登录区域
            $("#registerBox a").click();
        })
    })

    // 需求4: 登录
    $("#form-login").on('submit', function (e) {
        e.preventDefault();
        axios({
            method: 'POST',
            url: '/api/login',
            data: $("#form-login").serialize()
        }).then((res) => {
            // console.log(res.data);
            let obj = res.data;
            if (obj.status != 0) {
                return layer.msg(obj.message);
            }
            // 成功：提示，跳转，保存token
            layer.msg("恭喜您，登录成功！");
            location.href = '/index.html';
            localStorage.setItem('token', obj.token);
        })
    })

});